<template>
	<view class="u-skeleton">
		<!-- 顶部导航 -->
    <!-- <contact-list class="tui-contact-left-list" @friend="getGriend" @groupList="getGroupList" /> -->
    
		<view class="u-skeleton-rect">
			<u-swiper :list="info.images" @click="preview(info.images, swiperIndex)" @change="swiperChange" height="400" border-radius="0" imgMode="aspectFit"></u-swiper>
		</view>
		<view class="bg-white goods-detail">
			<view class="title">{{ info.title }}</view>
      <view class="zxb-box u-flex u-row-between u-col-center u-p-b-30">
        <view class="number u-tips-color">已售13个</view>
        <!-- <view class="u-text-center" @click="showShare = true"> -->
        <view class="u-text-center" @click="ShareGoods">
        	<u-icon size="35" name="share" color="#151515"></u-icon>
        	<view class="u-font-22">分享</view>
        </view>
      </view>
			<view class="zxb-line"></view>
      <!-- <view class="box2 zxb-box">
        <view class="item u-flex u-col-center u-row-left">
          <view class="lab u-tips-color">促销</view>
          <view class="text">暂无促销信息</view>
        </view>
        <view class="item u-flex u-col-center u-row-left">
          <view class="lab u-tips-color">已选</view>
          <view class="text" v-if="guige.newArr">{{guige.newArr}}，数量*{{guige.nums}}</view>
          <text v-else class="u-tips-color">未选</text>
        </view>
        <view class="item u-flex u-col-center u-row-left">
          <view class="lab u-tips-color">送至</view>
          <view class="text">暂无地址信息</view>
        </view>
      </view> -->
      <view class="zxb-line"></view>
      
      <template v-if="!noComment(info.comment)">
        <view class="bg-white box3 zxb-box">
        	<view class="text-weight u-flex u-row-between u-m-b-30">
        		<text class="u-flex-1 tit">评价</text>
        		<text class="u-tips-color u-font-24 text-normal u-m-r-15" @click="goPage('/pages/remark/lists?goods_id=' + id)">好评度:{{ info.favor_rate }}%</text>
            <u-icon name="arrow-right" color="#999"></u-icon>
        	</view>
        	<view class="u-flex u-row-center fa-empty u-p-b-30">
        		<view class="u-tips-color">暂无更多评论~</view>
        	</view>
        	<view class="comment u-border-bottom" v-for="(res, index) in info.comment" :key="res.id">
        		<view class="left"><image :src="res.user && res.user.avatar" mode="aspectFill"></image></view>
        		<view class="right">
        			<view class="top" :style="[{ color: theme.bgColor }]">
        				<view class="name">{{ res.user && res.user.nickname }}</view>
        				<view class="like">
        					<view class="num"><u-rate :count="5" :disabled="true" v-model="res.star"></u-rate></view>
        				</view>
        			</view>
        			<view class="content">{{ res.content }}</view>
        			<view class="images">
        				<image class="thumb" @click="preview(res.images, key)" v-for="(img, key) in res.images" :key="key" :src="img" mode="aspectFill"></image>
        			</view>
        			<view class="reply-box">
        				<view class="item" v-for="(item, index) in res.reply" :key="index">
        					<view class="">{{ item.manage && item.manage.nickname }}</view>
        					<view class="u-m-t-5">{{ item.content }}</view>
        				</view>
        			</view>
        			<view class="bottom u-flex u-row-between">
        				<text>{{ res.createtime | timeFrom('yyyy-mm-dd') }}</text>
        			</view>
        		</view>
        	</view>
        </view>
        <view class="zxb-line"></view>
      </template>
      
      <!-- 详情 -->
      <view class="bg-white box4 zxb-box">
      	<view class="text-weight tit">商品详情</view>
      	<view class="u-skeleton-rect">
      		<u-parse
      			:html="info.content"
      			:tag-style="vuex_parse_style"
      			:domain="vuex_config.config ? vuex_config.config.upload.cdnurl : ''"
      			@linkpress="diylinkpress"
      		></u-parse>
      	</view>
      </view>
      
      <!-- 推荐商品 -->
      <view class=" goods-list bg-white">
      	<view class="tit text-weight">推荐商品</view>
      	<view class="u-flex u-row-between u-flex-wrap">
      		<view class="item" v-for="(item, index) in recommends" :key="index" @click="goPage('/pages/goods/detail?id=' + item.id)">
      			<view class="images"><image :src="item.image" mode="aspectFill"></image></view>
      			<view class="u-p-15 name">
      				<text class="u-line-2">{{ item.title }}</text>
      			</view>
      			<view class="foot u-flex u-row-between u-tips-color">
      				<view class="">
      					<text class="u-m-r-10">销量</text>
      					<text>{{ item.sales }}</text>
      				</view>
      				<view class="">
      					<text class="u-m-r-10">浏览</text>
      					<text>{{ item.views || 0 }}</text>
      				</view>
      			</view>
      			<view class="u-flex u-row-between u-p-15">
      				<view class="price">
      					<text>￥{{ item.price }}</text>
      				</view>
      				<!-- <text class="market_price u-tips-color">￥{{ item.marketprice }}</text> -->
      			</view>
      		</view>
      		<!-- 空数据 -->
      		<view class="u-flex u-row-center fa-empty u-p-b-60" v-if="!recommends.length">
      			<image src="../../static/image/data.png" mode=""></image>
      			<view class="u-tips-color">暂无更多的推荐商品~</view>
      		</view>
      	</view>
      </view>
		</view>
		

		
    	
		

		<u-gap height="150" bg-color="#f4f6f9"></u-gap>
		<!-- 底部导航条 -->
		<view class="footer-bar u-flex u-row-between u-border-top">
			<view class="u-flex-1 u-text-center" @click="goIndexPage">
				<view class=""><u-icon name="home" size="35"></u-icon></view>
				<view class="u-font-20">首页</view>
			</view>
			<view class="u-flex-1 u-text-center" style="position: relative" @click="isLoginLink('/pages/cart/cart', 0)">
				<fa-u-badge v-if="cart_nums" type="error" :offset="[-20, -60]" :count="cart_nums"></fa-u-badge>
				<view class=""><u-icon name="shopping-cart" size="35"></u-icon></view>
				<view class="u-font-20">购物车</view>
			</view>
			<view class="u-flex u-row-between u-flex-1 bottom-btn">
				<view class="btn" @click="isLoginLink('', 1,)">加入购物车</view>
        <view class="btn btn2" @click="isLoginLink('', 2)">
          <text>{{ parseFloat(info.price)==0?'免费获取':'立即购买'}}</text>
        </view>
			</view>
		</view>
		<fa-skus v-if="info.id" v-model="show" :share_code="share_code" :sceneval="sceneval" :goodsInfo="info" @success="getCartNums" @backguige="getBackguige"></fa-skus>
		<u-popup v-model="guarantee_show" mode="bottom" border-radius="30">
			<view class="guarantee-content">
				<view class="u-text-center u-p-10">服务保障</view>
				<scroll-view scroll-y="true" :style="{ height: (info.guarantee && info.guarantee.length > 2 ? 600 : 350) + 'rpx' }">
					<view class="u-p-t-30">
						<u-cell-group>
							<u-cell-item
								icon="checkmark-circle"
								:icon-style="{ color: '#f2140c' }"
								:arrow="false"
								v-for="(item, index) in info.guarantee"
								:key="index"
								:title="item.name"
								:label="item.intro"
							></u-cell-item>
						</u-cell-group>
					</view>
				</scroll-view>
				<view class="confrim-btn u-p-t-20">
					<u-button
						size="medium"
						type="primary"
						hover-class="none"
						:custom-style="{ width: '80vw', backgroundColor: theme.bgColor, color: theme.color }"
						shape="circle"
						@click="guarantee_show = false"
					>
						确定
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 海报分享 -->
		<view class="" v-if="info.id">
			<fa-share
				:goods-id="info.id"
				:title="info.name"
				:summary="info.intro"
				:imageUrl="info.image_text"
				v-model="showShare"
				@shares="showPoster = true"
			></fa-share>
			<fa-poster v-model="showPoster" :goods="info"></fa-poster>
		</view>
		<fa-coupon v-model="showCoupon" :couponList="info.coupon"></fa-coupon>
		<!-- <fa-replys v-model="showReplay" :pid="replyId"></fa-replys> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
    
    <!-- 我的好友 -->
    
    <view class="shareShow" v-show="shareShow">
      <view class="shareShowBox">
      	<view class="tit u-p-10 flex">
          <text>分享</text>
          <u-icon name="close" color="#999" size="30" @click="shareShow = !shareShow"></u-icon>
        </view>
      	<scroll-view scroll-y="true" style="max-height: calc(100vh - 500rpx);">
      		<contact-list class="tui-contact-left-list" type="2" @checkItem="getCheckItem" />
      	</scroll-view>
      	<view class="confrim-btn u-p-t-20">
      		<u-button
      			size="medium"
      			type="primary" class="zxb-btn"
      			hover-class="none"
      			:custom-style="{ width: '94vw', backgroundColor: theme.bgColor, color: theme.color }"
      			shape="circle"
      			@click="shareGoodsComfirm"
      		>
      			确定
      		</u-button>
      	</view>
      </view>
    </view>
    <u-modal v-model="showTip" title="已发送" :showCancelButton="true" confirmText="前往消息页面" cancelText="留在当前页" confirmColor="#42b983" :zoom="false" @confirm="goMessage">
      <view class="u-p-30 u-flex u-col-center u-row-center">
        <u-icon name="checkbox-mark" color="#42b983" size="68"></u-icon>
      </view>
    </u-modal>
	</view>
</template>

<script>
  import {
    TUITranslateService,
    TUIStore,
    StoreName,
    IGroupModel,
    TUIFriendService,
    Friend,
    FriendApplication,
    TUIUserService,
  } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from "@tencentcloud/tui-core";
import TencentCloudChat  from "@tencentcloud/chat";
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
const { chat } = TUILogin.getContext();

import ContactList from '@/TUIKit/components/TUIContact/contact-list/index.vue';


// #ifdef H5
import { weixinShare } from '@/common/fa.weixin.mixin.js';
// #endif
export default {
  components:{
    'contact-list':ContactList,
  },
	mixins: [
		// #ifdef H5
		weixinShare
		// #endif
	],
	onLoad(e) {
    this.share_code = e.share_code;
		this.id = e.id || e.goods_id || '';
		let invite_id = e.invite_id || '';
		if (e.scene) {
			const scene = decodeURIComponent(e.scene);
			let goods_id = this.$util.getQueryString('goods_id', scene);
			if (goods_id) {
				this.id = goods_id;
			}
			invite_id = this.$util.getQueryString('invite_id', scene) || invite_id;
		}
		if (invite_id) {
			this.$u.vuex('vuex_invite_id', invite_id);
		}
		this.getGoodsInfo();
	},
	onShow() {
		if (this.vuex_token) {
			this.getCartNums();
		}
    setTimeout(()=>{
      console.log('IGroupModel---》', this.$chat_userID)
    },6000)
    
	},
	computed: {
		noComment() {
			return item => {
				if (!item) {
					return true;
				} else if (!item.length) {
					return true;
				} else {
					return false;
				}
			};
		},
		skuSpecAttr() {
			let arr = [];
			if (this.info.sku_spec) {
				for (let sku of this.info.sku_spec) {
					let valArr = sku.sku_value.map(item => {
						return item.title;
					});
					arr.push(sku.title + ':' + valArr.join(','));
				}
			}
			return arr.join('-');
		}
	},
	data() {
		return {
      showTip:false,
			info: {},
			id: '',
			cart_nums: 0,
			show: false,
			guarantee_show: false,
			sceneval: 2,
			loading: true,
			swiperIndex: 0,
			showReplay: false,
			replyId: '',
			showShare: false,
			showPoster: false,
			showCoupon:false,
			recommends: [],
      guige:{},
      shareShow:false, // 好友分享
      shareShow1:true,
      shareInfo:null,
      share_code:''
		};
	},
	methods: {
    isLoginLink(url, type){
      if(this.vuex_token){
        if(type === 1){
          goPage(url)
        }else{
          this.sceneval = type;
          this.show = true;
        }
      }else{
        uni.showModal({
          title:'温馨提示',
          content:'您还没有登录，请先登录',
          confirmText:'立即登录',
          success: (res) => {
            if(res.confirm){
              this.$u.route('/pages/login/login');
            }
          }
        })
        
      }
    },
    goMessage(){
      uni.switchTab({
        url:'/TUIKit/components/TUIConversation/index'
      })
    },
    shareGoodsComfirm(){
      const e = this.shareInfo;
      const conversationType = e.userID ? TencentCloudChat.TYPES.CONV_C2C : TencentCloudChat.TYPES.CONV_GROUP;
      const toId = e.userID ? e.userID : e.groupID
      const that = this;
      let promise = TUIChatService.sendCustomMessage({
        payload: {
          data: JSON.stringify({
            // 订单类消息标识字段
            businessID: "order",
            // 订单标题
            title: that.info.title,
            // 订单描述
            description: that.info.subtitle,
            // 订单价格
            price: `${that.info.price}元`,
            // 订单 url
            link: '/pages/goods/detail?id='+that.info.id+'&share_code='+this.vuex_share_code,
            // 订单封面图
            imageUrl: that.info.image,
          }),
          description: "",
          extension: ""
        },
        to:toId,
        conversationType:conversationType
      },{
        onlineUserOnly:false
      });
      promise.then(()=>{
        console.log('分享好友成功')
        this.showTip = true;
      })
      promise.catch((error) => {
        console.log('error----', error)
        // 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
      });
      this.shareShow = false;
    },
    ShareGoods(){
      this.shareShow = true;
    },
    getCheckItem(item){
      this.shareInfo = item;
      
    },
    // 获取选择的规格
    getBackguige(e){
      console.log('getBackguige', e)
      this.guige = e;
    },
		swiperChange(index) {
			this.swiperIndex = index;
		},
		getGoodsInfo() {
			if (!this.id) {
				return;
			}
			this.$api.getGoodsInfo({ id: this.id }).then(res => {
				if (res.code == 1) {
					this.info = res.data;
					// #ifdef MP-WEIXIN
					this.$u.mpShare = {
						title: res.data.title,
						imageUrl: res.data.image,
						path: '/pages/goods/detail?id=' + this.id + '&invite_id=' + (this.vuex_user.id || '')
					};
					// #endif
					// #ifdef H5
					if (this.$util.isWeiXinBrowser()) {
						this.wxShare({
							title: res.data.title,
							desc: res.data.description,
							url: window.location.href + `&invite_id=${this.vuex_user.id || ''}`,
							img: res.data.image
						});
					}
					// #endif
					this.loading = false;
					//取同类推荐商品
					this.getGoods(this.info.category_id);
				} else {
					this.$u.toast(res.msg);
					setTimeout(() => {
						uni.$u.route({
							type:'back'
						});
					}, 1500);
				}
			});
		},
		goIndexPage() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		getCartNums() {
			this.$api.cart_nums().then(res => {
				if (res.code) {
					this.cart_nums = res.data || 0;
				}
			});
		},
		optionCollect() {
			this.$api
				.optionCollect({
					goods_id: this.id
				})
				.then(res => {
					this.$u.toast(res.msg);
					if (res.code) {
						this.$set(this.info, 'is_collect', !this.info.is_collect);
					}
				});
		},
		preview(images, index) {
			uni.previewImage({
				urls: images,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		getGoods(category_id) {
			this.$api.getGoodsList({ category_id }).then(({ code, data: res, msg }) => {
				if (code == 1) {
					this.recommends = res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
// :deep .tui-contact-list-itemfriendApplicationList,.tui-contact-list-itemblackList{display: none !important;}
.shareShow{
  position: fixed;  left: 0; bottom: 0;  z-index: 9999; background-color: rgba(0,0,0,0.5);
  width: 750rpx; height: 100vh; display: flex; align-items: flex-end;
  .shareShowBox{background-color: #fff; position: absolute1; width: 100%; left: 0; bottom: 0; border-radius: 20rpx 20rpx 0 0;}
  .zxb-btn{margin: 0 auto 60rpx; display: flex; align-items: center; }
  .tit{font-size: 36rpx; font-weight: bold; padding: 30rpx !important; border-bottom: 1px solid #ededed; margin-bottom: 30rpx; display: flex; align-items: center; justify-content: space-between;}
}
.goods-detail {
  .zxb-box{padding: 0 30rpx;}
  .title{color: #151515; padding: 40rpx 30rpx;}
  .tit{font-size: 28rpx; padding: 36rpx 0;}
  .zxb-line{width: 100%; height: 20rpx; background-color: #F9F9F9;}
  .zxb-box{padding-left:30rpx !important; padding-right:30rpx !important}
  .box2{
    font-size: 28rpx; padding: 6rpx 0;
    .item{padding: 30rpx 0;}
    .lab{margin-right: 30rpx;}
  }
	.market_price {
		text-decoration: line-through;
		margin-left: 15rpx;
	}
}
.zxb-title{font-size: 28rpx; font-weight:bold; margin-bottom: 40rpx; color: #000;}
.coupon {
	padding: 0 20rpx;
	border: 1rpx solid #f2857b;
	color: #e93323;
	position: relative;
	&:before,
	&:after {
		content: ' ';
		position: absolute;
		width: 8rpx;
		height: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #f2857b;
		background-color: #fff;
		bottom: 50%;
		margin-bottom: -8rpx;
	}
	&:before {
		left: -4rpx;
		border-left-color: #fff;
	}
	&:after {
		border-right-color: #fff;
		right: -4rpx;
	}
}

.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.like {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			margin-top: 15rpx;
			.item {
				padding: 20rpx;
				font-size: 24rpx;
				&:not(:last-child) {
					border-bottom: solid 2rpx $u-border-color;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
		}
		.images {
			display: flex;
			flex-wrap: wrap;
			.thumb {
				width: 130rpx;
				height: 130rpx;
				margin: 15rpx 15rpx 0 0;
			}
		}
	}
}
.guarantee-content {
	padding: 24rpx;
	text-align: center;
}

.recommends {
	padding: 30rpx 30rpx 0;
	.title {
		position: relative;
		padding-left: 15rpx;
		.stroke {
			&::before {
				content: '';
				width: 8rpx;
				height: 30rpx;
				background-color: #374486;
				position: absolute;
				top: 15%;
				left: 0rpx;
				border-radius: 20rpx;
			}
		}
	}
}

.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30rpx; padding-top: 56rpx; background-color: #F6F7F7;
	.item {
		width: 49%;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.name {
			min-height: 110rpx; font-size: 28rpx;
		}
		.foot {
			padding: 0 15rpx;
		}
		.images {
			width: 100%; padding: 12rpx 12rpx 0; 
			height: 352rpx;
			image {
				width: 100%;border-radius: 10rpx;
				height: 100%;
			}
		}
		.market_price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
    .price{color: #EE175D; font-size: 30rpx; font-weight: bold;}
	}
}


.footer-bar{
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.5);
  .bottom-btn{
    width: 386rpx; min-width: 386rpx; height: 72rpx; border-radius: 50rpx; border: 1px solid #151515; overflow: hidden;
    .btn{width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20rpx;}
    .btn2{background-color: #151515; color: #fff;}
  }
}
</style>
